import {createApp, toRaw} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style.css'
import './assets/css/reset.less'
import App from './App.vue'
import router from "./router";
import {createPinia, PiniaPluginContext} from 'pinia'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'


type Options = {
  key?: string
}

const __piniaKey__='wms'
const setStorage = (key:string, value:any) =>{
  localStorage.setItem(key, JSON.stringify(value))
}

const getStorage = (key:string)=>{
  return localStorage.getItem(key)?JSON.parse(localStorage.getItem(key) as string):{}
}

const piniaPlugin = (options:Options) => {
  return (context: PiniaPluginContext) => {
    const {store} = context
    const data = getStorage(`${options?.key??__piniaKey__}-${store.$id}`)
    store.$subscribe(()=>{
      setStorage(`${options?.key??__piniaKey__}-${store.$id}`, toRaw(store.$state))
    })

    return {
      ...data
    }
  }

}
const store = createPinia()

store.use(piniaPlugin({
  key: 'pinia',
}))

export const app = createApp(App)
app.use(store)

//注册路由
app.use(router)


for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(ElementPlus, {locale: zhCn, size: 'large', zIndex: 3000})
app.mount('#app')
